<template>
  <Card dis-hover :bordered="false">
    <Form inline>
      <FormItem class="ivu-mb-8">
        <Select
          clearable
          v-width="160"
          placeholder="请选择部门"
          v-model="params.departmentId"
          @on-change="changeParams"
        >
          <Option
            v-for="(item, index) in department"
            :key="index"
            :value="item.value"
            >{{ item.label }}
          </Option>
        </Select>
      </FormItem>
      <FormItem class="ivu-mb-8">
        <DatePicker
          :editable="false"
          type="daterange"
          placeholder="请选择时间"
          @on-change="changeParams"
          v-model="params.time"
        />
      </FormItem>
    </Form>
    <Table :columns="columns" :data="data" :loading="tableLoading">
      <template slot="wechat" slot-scope="{ row }">
        <a style="display: flex;" @click="handleReport(row)">
          <Avatar
            shape="square"
            size="large"
            class="ivu-fl"
            :src="row.avatar"
          />
          <div>
            <div class="ivu-ml-8">{{ row.wechatnick }}</div>
            <div class="ivu-ml-8 ivu-weixin">
              {{ row.wechatno }}
            </div>
          </div>
        </a>
      </template>
      <template slot="action" slot-scope="{ row }">
        <a @click="handleReport(row)">报表</a>
        <Divider type="vertical" />
        <a @click="handleMoments(row)">朋友圈</a>
      </template>
    </Table>
    <div class="ivu-mt ivu-text-center">
      <Page
        show-total
        show-elevator
        show-sizer
        :total="total"
        :current.sync="params.page"
        :page-size="params.pageSize"
        :page-size-opts="pageOpts"
        @on-change="formSize"
        @on-page-size-change="formChangePage"
      />
    </div>
    <Modal
      title="朋友圈"
      v-model="moments"
      :footer-hide="true"
      :mask-closable="false"
      width="650"
    >
      <div slot="header" style="height: 40px;">
        <Avatar
          shape="square"
          size="large"
          class="ivu-fl"
          :src="circleInfo.avatar"
        />
        <span class="ivu-ml-8" style="margin-top:10px ;display:inline-block;">{{
          circleInfo.wechatnick
        }}</span>
        <br />
        <span class="ivu-ml-8 ivu-weixin">{{ circleInfo.wechatno }}</span>
      </div>
      <div
        v-if="circleList.length"
        style="height: 650px;overflow: auto;padding-bottom: 30px;box-sizing: border-box;"
        ref="scrollBox"
      >
        <div>
          <div v-for="(item, index) in circleList" :key="index">
            <div style="font-size: 18px;font-weight: bold;">
              {{ item.year }}年
            </div>
            <div v-for="(item1, index1) in item.list" :key="index1">
              <div
                v-for="(item2, index2) in item1.info"
                :key="index2"
                style="margin-top: 30px;position: relative; "
              >
                <span
                  v-if="index2 === 0"
                  style="position: absolute;left: 0;top: 0;"
                >
                  <span style="font-size: 14px;font-weight: bold;">{{
                    item1.day
                  }}</span>
                  <span style="margin-left: 8px;font-size: 12px;">{{
                    filterMonth(item1.month)
                  }}</span>
                </span>
                <Poptip
                  trigger="hover"
                  word-wrap
                  width="300"
                  :content="item2.content"
                >
                  <div class="dhsl ml60" style="font-weight: 600;">
                    {{ item2.content }}
                  </div>
                </Poptip>
                <div class="ml60" style="margin-top: 20px;margin-bottom: 20px;">
                  <div>
                    <template v-if="item2.type === '2'">
                      <img
                        style="margin-left: 15px;width: 100px;height: 120px;object-fit: cover;"
                        v-for="(item3, index3) in imgLists(item2.image)"
                        :src="item3.thumb_img"
                        alt=""
                        @click="preImg(item3.thumb_img)"
                      />
                    </template>
                    <template v-if="item2.type === '4'">
                      <a :href="JSON.parse(item2.link).url" target="_blank">{{
                        JSON.parse(item2.link).url
                      }}</a>
                    </template>
                    <template v-if="item2.type === '3'">
                      <video
                        controls
                        preload="auto"
                        poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg"
                        width="450"
                        height="200"
                        :src="JSON.parse(item2.video).url"
                      ></video>
                    </template>
                  </div>
                </div>
                <div class="ml60">
                  <span style="font-size: 12px; color: rgb(184, 180, 180);">{{
                    item2.publish_time
                  }}</span>
                  <span style="margin-left:20px">
                    <Icon style="font-size: 18px;" type="ios-text-outline" />
                    <span style="font-size: 12px; color: rgb(184, 180, 180);">
                      {{ item2.comment_like }}
                    </span>
                  </span>
                  <span style="margin-left:20px">
                    <Icon type="md-heart-outline" />
                    <span style="font-size: 12px; color: rgb(184, 180, 180);">{{
                      item2.like_count
                    }}</span>
                  </span>
                </div>
              </div>
              <div></div>
            </div>
          </div>
        </div>
      </div>
      <div
        v-if="circleList.length"
        style="display: flex;justify-content: center;align-items: center;padding: 10px 0px; box-sizing: border-box;"
      >
        <Page
          show-total
          :total="circleTotal"
          show-sizer
          :current.sync="circleParams.page"
          :page-size="circleParams.pageSize"
          :page-size-opts="pageOpts1"
          @on-change="formSize1"
          @on-page-size-change="formChangePage1"
        />
      </div>
      <div
        v-if="!circleList.length"
        style="text-align: center;font-size: 18px;padding: 60px;box-sizing: border-box;"
      >
        暂无朋友圈数据
      </div>
    </Modal>
    <robot-report :reportInfo="reportInfo" ref="robotReport" />
    <Modal v-model="alrgePicModal" title="查看大图" footer-hide>
      <img :src="preImgSrc" style="width: 100%;" />
    </Modal>
  </Card>
</template>
<script>
import robotReport from "@/components/robotReport";
import dayjs from "dayjs";
import { getRobotList, getCircleList } from "@/api/TApi/index.js";
export default {
  name: "robotReports",
  components: {
    robotReport,
  },
  data() {
    return {
      department: [],
      alrgePicModal: false,
      preImgSrc: "",
      circleList: {},
      reportInfo: {},
      circleTotal: 0,
      circleParams: {
        page: 1,
        pageSize: 6,
      },
      tableLoading: false,
      pageOpts1: [6, 8, 10, 12], // 分页每页数量
      pageOpts: [10, 20, 30, 50], // 分页每页数量
      total: 0,
      circleInfo: {},
      params: {
        page: 1,
        pageSize: 10,
        departmentId: "",
        time: [],
      },
      moments: false,
      columns: [
        {
          title: "客服微信",
          slot: "wechat",
          width: 320,
          fixed: "left",
        },
        {
          title: "绑定人员",
          key: "account",
          minWidth: 130,
        },
        {
          title: "新增好友",
          key: "add_friend",
          minWidth: 130,
        },
        {
          title: "总好友",
          key: "friend_cnt",
          minWidth: 130,
        },
        {
          title: "互动人数",
          key: "interact_friend",
          minWidth: 130,
        },
        {
          title: "互动条数",
          key: "message_total",
          minWidth: 130,
        },
        {
          title: "最后在线时间",
          key: "login_time",
          minWidth: 180,
        },
        {
          title: "主动删除人数",
          key: "status_delete",
          minWidth: 180,
        },
        {
          title: "被动删除人数",
          key: "status_deleted",
          minWidth: 180,
        },
        {
          title: "操作",
          slot: "action",
          width: 185,
          fixed: "right",
        },
      ],
      data: [],
    };
  },
  mounted() {
    this._getRobotList();
  },
  computed: {
    // 获取当前周的开始结束时间
    getCurrWeekDays() {
      let date = [];
      let weekOfday = parseInt(dayjs().format("d")); // 计算今天是这周第几天 周日为一周中的第一天
      let start = dayjs()
        .subtract(weekOfday - 1, "days")
        .format("YYYY-MM-DD"); // 周一日期
      let end = dayjs()
        .add(7 - weekOfday, "days")
        .format("YYYY-MM-DD"); // 周日日期
      date.push(start);
      date.push(end);
      return date;
    },
    imgLists(data) {
      return function(data) {
        return JSON.parse(data);
      };
    },
    filterMonth(data) {
      return function(data) {
        return data.startsWith("0") ? data[1] + "月" : data + "月";
      };
    },
  },
  methods: {
    /* @函数功能: 分页 */
    formSize1(e) {
      this.circleParams.page = e;
      this._getCircleList(this.circleInfo);
      this.$refs.scrollBox.scrollTop = 0;
    },
    /* @函数功能: 每页数量 */
    formChangePage1(e) {
      this.circleParams.pageSize = e;
      this._getCircleList(this.circleInfo);
    },
    /* @函数功能: 分页 */
    formSize(e) {
      this.params.page = e;
      this._getRobotList();
    },
    changeParams() {
      this.params.page = 1;
      this._getRobotList();
    },
    preImg(url) {
      this.preImgSrc = url;
      this.alrgePicModal = true;
    },
    /* @函数功能: 每页数量 */
    formChangePage(e) {
      this.params.pageSize = e;
      this._getRobotList();
    },
    _getRobotList() {
      let params = {
        page: this.params.page,
        pageSize: this.params.pageSize,
        department_id:
          this.params.departmentId === undefined
            ? ""
            : this.params.departmentId,
        start: this.params.time[0]
          ? dayjs(this.params.time[0]).format("YYYY-MM-DD")
          : "",
        end: this.params.time[1]
          ? dayjs(this.params.time[1]).format("YYYY-MM-DD")
          : "",
      };
      this.tableLoading = true;
      getRobotList(params).then((res) => {
        this.department = res.getDepartmentList;
        this.total = res.total;
        this.data = res.list;
        this.tableLoading = false;
      });
    },
    unique(arr1) {
      const res = new Map();
      return arr1.filter((a) => {
        return !res.has(a.year) && res.set(a.year, 1);
      });
    },
    handleReport(row) {
      this.reportInfo = row;
      this.$refs.robotReport.handleRobot(this.getCurrWeekDays, row);
    },
    _getCircleList(row) {
      getCircleList({
        ...this.circleParams,
        wechatid: row.wechatid,
      }).then((res) => {
        this.moments = true;
        let arr = [];
        for (let key in res.list) {
          arr.push({
            year: key.substring(0, 4),
            month: key.substring(5, 7),
            day: key.substring(8, 10),
            info: res.list[key],
          });
        }
        let one = this.unique(arr);
        this.circleList = one.map((ee) => {
          return {
            year: ee.year,
            list: arr.filter((vv) => {
              return vv.year === ee.year;
            }),
          };
        });
        this.circleTotal = res.total;
      });
    },
    handleMoments(row) {
      this.circleInfo = row;
      this.circleParams.page = 1;
      this._getCircleList(row);
    },
  },
};
</script>
<style scoped lang="less">
.ml30 {
  padding-left: 30px;
  box-sizing: border-box;
}

.ml60 {
  padding-left: 73px;
  box-sizing: border-box;
}

.dhsl {
  width: 500px;
  text-overflow: ellipsis;
  /*文字以省略号的方式隐藏*/
  white-space: nowrap;
  /*禁止文字内容折行*/
  overflow: hidden;
}
</style>
